<template>
  <div class="auth-bg">
    <div class="auth-card">
      <!-- 顶部标题和右侧登录链接 -->
      <div class="auth-header">
        <span class="title">成为作家</span>
        <!-- <span class="login-tip">已是作家？<a class="login-link" href="#">直接登录</a></span> -->
      </div>
      <!-- 表单内容 -->
      <form class="auth-form" @submit.prevent="submitForm">
        <!-- 手机号 -->
        <div class="form-row">
          <label><span class="required">*</span> 手机号</label>
          <input type="text" v-model="form.phone" maxlength="11" placeholder="请输入手机号" @blur="validatePhone">
          <span class="error" v-if="errors.phone">{{ errors.phone }}</span>
        </div>
        <!-- 验证码 -->
        <div class="form-row code-row">
          <label><span class="required">*</span> 验证码</label>
          <input type="text" v-model="form.code" maxlength="6" placeholder="请输入短信验证码" @blur="validateCode">
          <button type="button" class="code-btn" @click="sendCode">
            {{ codeTimer}}
          </button>
          <span class="error" v-if="errors.code">{{ errors.code }}</span>
        </div>
        <!-- 作家笔名 -->
        <div class="form-row">
          <label>作家笔名</label>
          <input type="text" v-model="form.penName" maxlength="12" placeholder="可选，最多12字">
        </div>
        <!-- 真实姓名 -->
        <div class="form-row">
          <label><span class="required">*</span> 真实姓名</label>
          <input type="text" v-model="form.realName" maxlength="8" placeholder="请输入真实姓名" @blur="validateRealName">
          <span class="error" v-if="errors.realName">{{ errors.realName }}</span>
        </div>
        <!-- 身份证号 -->
        <div class="form-row">
          <label>身份证号</label>
          <input type="text" v-model="form.idCard" maxlength="18" placeholder="请输入身份证号码" @blur="validateIdCard">
          <span class="error" v-if="errors.idCard">{{ errors.idCard }}</span>
        </div>
        <!-- 重要提示 -->
        <div class="form-row tip-row">
          <span class="tip">重要提示：请确保手机号、真实姓名、身份证号是您本人的真实信息。</span>
        </div>
        <!-- 协议勾选 -->
        <div class="form-row agree-row">
          <input type="checkbox" id="agree" v-model="form.agree">
          <label for="agree">
            已阅读并同意 
            <router-link to="/yhxy">《用户协议》</router-link>
            <router-link to="/ysxy">《隐私协议》</router-link>
            <router-link to="/worksAg">《作品签约规则》</router-link>
          </label>
        </div>
        <!-- 提交按钮 -->
        <button class="submit-btn" :disabled="!canSubmit">提交信息</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      // 表单数据
      form: {
        phone: '',
        code: '',
        penName: '',
        realName: '',
        idCard: '',
        agree: false
      },
      // 校验错误信息
      errors: {
        phone: '',
        code: '',
        realName: '',
        idCard: ''
      },
      // 验证码倒计时
      codeTimer: '获取验证码',
      codeInterval: null
    }
  },
  computed: {
    // 是否允许提交
    canSubmit() {
      // 所有必填项校验通过且协议勾选
      return (
        this.form.phone &&
        this.form.code &&
        this.form.realName &&
        this.form.agree &&
        !this.errors.phone &&
        !this.errors.code &&
        !this.errors.realName &&
        !this.errors.idCard
      )
    }
  },
  methods: {
    // 手机号校验
    validatePhone() {
      const phoneReg = /^1[3-9]\d{9}$/
      if (!this.form.phone) {
        this.errors.phone = '手机号不能为空'
      } else if (!phoneReg.test(this.form.phone)) {
        this.errors.phone = '手机号格式不正确'
      } else {
        this.errors.phone = ''
      }
    },
    // 验证码校验
    validateCode() {
      if (!this.form.code) {
        this.errors.code = '验证码不能为空'
      } else if (!/^\d{4,6}$/.test(this.form.code)) {
        this.errors.code = '验证码格式不正确'
      } else {
        this.errors.code = ''
      }
    },
    // 真实姓名校验
    validateRealName() {
      if (!this.form.realName) {
        this.errors.realName = '真实姓名不能为空'
      } else if (!/^[\u4e00-\u9fa5]{2,8}$/.test(this.form.realName)) {
        this.errors.realName = '真实姓名需为2-8个中文字符'
      } else {
        this.errors.realName = ''
      }
    },
    // 身份证号校验
    validateIdCard() {
      if (!this.form.idCard) {
        this.errors.idCard = ''
        return
      }
      // 简单校验18位或15位数字/末尾X
      if (!/^\d{15}$|^\d{17}[\dXx]$/.test(this.form.idCard)) {
        this.errors.idCard = '身份证号格式不正确'
      } else {
        this.errors.idCard = ''
      }
    },
    // 发送验证码
    sendCode() {
      if (this.form.phone !== '') {
        if (this.codeTimer !== '获取验证码') {
          this.$message({
            message: '请等待验证码倒计时结束',
            type: 'warning',
            duration: 1000
          });
          return;
        }
        let count = 60; // 验证码倒计时
        const interval = setInterval(() => {
          if (count > 0) {
            this.codeTimer = `${count}秒后重新获取`;
            count--;
          } else {
            clearInterval(interval);
            this.codeTimer = '获取验证码'; // 重置验证码输入框
          }
        }, 1000);
        axios.post('/api/index/register', { phone: this.form.phone, action: 'send_code' })
          .then(response => {
            console.log('验证码发送成功:', response.data);
            if (response.data.code !== 200) {
              this.$message({
                message: response.data.msg,
                type: 'success',
                duration: 1000
              });
            }
          }).catch(error => {
            console.error('验证码发送失败:', error);
            this.$message({
              message: '验证码发送失败，请稍后再试',
              type: 'error',
              duration: 1000
            });
          });
      } else {
        this.$message({
          message: '请先输入手机号',
          type: 'warning',
          duration: 1000
        });
      }
    },
    // 提交表单
    submitForm() {
      this.validatePhone()
      this.validateCode()
      this.validateRealName()
      this.validateIdCard()
      if (!this.canSubmit) return
      // TODO: 提交表单逻辑
      this.$message.success('信息提交成功，审核3-5个工作日');
      this.$router.push('/');
    }
  },
  beforeDestroy() {
    if (this.codeInterval) clearInterval(this.codeInterval)
  }
}
</script>

<style lang="scss" scoped>
.auth-bg {
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../../assets/image/8d9207d9.jol4ei.png');
  background-size: 100%;
}
.auth-card {
  width: 540px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  margin: 40px auto;
  padding: 0 0 32px 0;
}
.auth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 48px;
  .title {
    font-size: 26px;
    font-weight: bold;
    color: #333;
  }
  .login-tip {
    font-size: 15px;
    color: #888;
    .login-link {
      color: #e94f4f;
      text-decoration: none;
      margin-left: 4px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.auth-form {
  padding: 24px 48px 0 48px;
  display: flex;
  flex-direction: column;
  .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    label {
      width: 90px;
      font-size: 15px;
      color: #333;
      .required {
        color: #e94f4f;
        margin-right: 2px;
      }
    }
    input[type="text"] {
      flex: 1;
      height: 38px;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      padding: 0 12px;
      font-size: 15px;
      color: #333;
      outline: none;
      transition: border 0.2s;
      &:focus {
        border: 1.5px solid #e94f4f;
      }
    }
    .error {
      position: absolute;
      left: 102px;
      top: 40px;
      font-size: 13px;
      color: #e94f4f;
    }
    &.code-row {
      input[type="text"] {
        width: 60%;
        margin-right: 10px;
      }
      .code-btn {
        width: 110px;
        height: 38px;
        background: #f7f8fa;
        color: #b63228;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.2s;
        // &:disabled {
        //   color: #bbb;
        //   background: #f0f0f0;
        //   cursor: not-allowed;
        // }
        &:hover:not(:disabled) {
          background: #ffeaea;
        }
      }
    }
    &.tip-row {
        text-align: center;
      label { display: none; }
      .tip {
        text-align: center;
        color: #e94f4f;
        font-size: 13px;
        margin-left: 0;
      }
    }
    &.agree-row {
      label {
        width: auto;
        font-size: 14px;
        color: #888;
        margin: 0 0 0 8px;
        
        text-align: center;
        a {
          color: #e94f4f;
          text-decoration: none;
          &:hover { text-decoration: underline; }
        }
      }
      input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }
  }
  .submit-btn {
    width: 100%;
    height: 42px;
    background: #e0e0e0;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 17px;
    font-weight: bold;
    margin-top: 10px;
    cursor: not-allowed;
    transition: background 0.2s;
    &:not(:disabled) {
      background: #e94f4f;
      cursor: pointer;
    }
    &:hover:not(:disabled) {
      background: #b63228;
    }
  }
}
@media (max-width: 700px) {
  .auth-card {
    width: 98vw;
    min-width: 0;
    padding: 0 0 16px 0;
  }
  .auth-header {
    padding: 18px 10px 0 10px;
  }
  .auth-form {
    padding: 12px 8px 0 8px;
  }
}
</style>
